<div class="container pt-5">
  <div class="row mb-4">
    <div class="text-center">
      <h1 class="h5">Services Feature<i class="fas fa-list ms-2"></i></h1>
      <hr>
    </div>
  </div>
  <div class="row  justify-content-center">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <div class="text-center col mb-4">
        <div class="card bg-light p-4 text-center">
          <div class="card-body" *ngIf="songSelected">
            <h5 class="card-title text-primary">{{ songSelected.artist }}</h5>
            <h6 class="card-title text-info">{{ songSelected.title }}</h6>
            <h6 class="card-title text-secondary">{{ songSelected.top }}</h6>
          </div>
          <div class="card-body" *ngIf="!songSelected">
            <div class="alert alert-danger" role="alert">
              Select a song on the list to see the clip<br>
              <i class="fab fa-youtube fa-2x text-danger"></i>
            </div>
          </div>
          <div *ngIf="songSelected" class="embed-responsive embed-responsive-16by9">
            <iframe width="100%" height="450" [src]="('https://www.youtube.com/embed/' + songSelected.link) | safe"
              allowfullscreen>
            </iframe>
          </div>
        </div>
      </div>

    </div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <div class="form-group mb-4">
        <label class="text-primary fw-bold mb-2" for="selectSongs">Top Single (France)
        </label>
        <select class="form-control text-primary fw-bold" id="selectSongs"
          (change)="onChangeYear($event)">
          <option value="1">2019</option>
          <option value="2">2018</option>
          <option value="3" selected>2017</option>
          <option value="4">2016</option>
          <option value="5">2015</option>
        </select>
      </div>
      <table class="table table-hover table-striped table-bordered table-responsive-md table-sm">
        <thead>
          <tr>
            <th class="text-secondary" style="text-align:center;">Clip</th>
            <th class="text-secondary" style="text-align:center;">Top</th>
            <th class="text-primary" style="text-align:center;">Artist</th>
            <th class="text-info" style="cursor: pointer;text-align:center;">Title</th>
          </tr>
        </thead>
        <tbody>
          <!--          <tr *ngFor="let song of songs" class="table-{{ song.class }}" (click)="select(song)">-->
          <tr *ngFor="let song of songs" (click)="select(song)">
            <td class="text-secondary" style="cursor: pointer;text-align:center"><i
                class="fab fa-youtube text-danger"></i></td>
            <td class="text-secondary" style="cursor: pointer;text-align:center">{{ song.top }}</td>
            <td class="text-primary" style="cursor: pointer;text-align:center">{{ song.artist }}</td>
            <td class="text-info" style="cursor: pointer;text-align:center">{{ song.title }}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

</div>